<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title th:text="${sysName}"></title>

    <!-- CSS -->
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css" th:href="@{static/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../static/mycss/common.css" th:href="@{static/mycss/common.css}"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 顶部 -->
    <div class="layui-header" lay-filter="test1">
        <div class="layui-logo"><span th:text="${sysName}"></span></div>
        <ul class="layui-nav layui-layout-left" id="topMenu">
            
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:"><i class="layui-icon layui-icon-radio"></i> 前台</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">待办事项：<span id="eventToDo" style="color: red">5</span></a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:" id="e1">注册申请：<span id="eventToDo1" style="color: red">2</span></a></dd>
                    <dd><a href="javascript:" id="e2">密码重置：<span id="eventToDo2" style="color: red">3</span></a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">在线人数：<span id="onlineNum"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">个人中心</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:" id="modInfo">修改信息</a></dd>
                    <dd><a href="javascript:" id="modPassword">修改密码</a></dd>
                    <dd><a href="javascript:" id="aaa">收藏夹</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:" id="lockPage">锁屏</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:" id="loginOut">退出</a>
            </li>
        </ul>
    </div>

    <!-- 左侧导航区域 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧 头像 -->
            <div class="photo">
                <div th:if="${sysAcc != null}">
                    <img class="layui-nav-img_bg" th:src="@{/sysAcc/getPhoto(filePath=${sysAcc.sa02})}"/>
                </div>
                <div th:if="${sysAcc == null}">
                    <img class="layui-nav-img_bg" th:src="@{static/images/head/head.jpg}"/>
                </div>
                <p><span th:text="${userName}"></span></p>
            </div>
            <!--<hr class="layui-bg-green"/>-->
            <!-- 左侧 菜单 -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon layui-icon-app"></i> 功能区</a>
                    <dl class="layui-nav-child child" id="leftMenu">

                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body" id="layui-body">
        <!-- 内容主体区域 -->
            <div class="layui-tab margin_0" lay-filter="tabs" lay-allowClose="">
                <ul class="layui-tab-title myTab ">
                    <li class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
                </ul>
                <ul class="myMenu" style="display: none;position: absolute">
                    <li class="refreshThisTab">刷新当前</li>
                    <li class="closeThisTab">关闭当前</li>
                    <li class="closeOtherTabs">关闭其他</li>
                </ul>
                <ul class="layui-nav tabOption">
                    <li class="layui-nav-item">
                        <a href="javascript:" class="refreshThisTab"><i class="layui-icon layui-icon-refresh"></i> 刷新</a>
                        <dl class="layui-nav-child">
                            <!--<dd><a href="javascript:" class="refreshThisTab"><i class="layui-icon layui-icon-refresh"></i> 刷新</a></dd>-->
                            <dd><a href="javascript:" class="closeThisTab">关闭当前</a></dd>
                            <dd><a href="javascript:" class="closeOtherTabs">关闭其他</a></dd>
                            <dd><a href="javascript:" class="closeAllTabs">关闭全部</a></dd>
                        </dl>
                    </li>
                </ul>
                <div class="layui-tab-content tabContent" data-anim="layui-anim-upbit">
                    <div class="layui-tab-item layui-show">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend>系统日志 2018 年 11 月 02 日</legend>
                        </fieldset>
                        <ul class="layui-timeline">
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2018年，layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架（期望）</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 发布</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2016年，layui 首个版本发布</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2015年，layui 孵化</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2015年，layui 孵化</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2015年，layui 孵化</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2015年，layui 孵化</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2015年，layui 孵化</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2015年，layui 孵化</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">2015年，layui 孵化</div>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
    </div>

    <div class="layui-footer footer">
        <!-- 底部固定区域 -->
        <span> 这里可以搞一个信息滚动，比如某某登录了，或者重要信息提醒，代办事项信息也可以滚动</span>
    </div>
</div>

<!-- JS -->
<script type="text/javascript" src="../static/plugins/layui/layui.js" th:src="@{static/plugins/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/plugins/zTree_v3/js/jquery-1.4.4.min.js" th:src="@{static/plugins/zTree_v3/js/jquery-2.2.4.min.js}"></script>
<script type="text/javascript">
    var websocket = null;
    /**
     * 判断当前浏览器是否支持WebSocket,如果支持则建立一个websocket链接
     */
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8888/hbean/websocket/"+JSON.parse(sessionStorage.getItem("userInfo")).su00);
    }
    else{
        alert('websocket not support')
    }
    websocket.onopen = function(event){//连接成功建立的回调方法
    };
    websocket.onerror = function(){//连接发生错误的回调方法
    };
    websocket.onmessage = function(event){//接收到消息的回调方法
        var obj = JSON.parse(event.data);
        //在线人数
        if(obj.onlineNum != undefined){
            // console.log(obj.onlineNumber);
            $('#onlineNum').text(obj.onlineNum);
        }
        //上线通知
        if(obj.loginOnInfo != undefined){
            layui.layer.msg(obj.loginOnInfo, {icon: 6,time:5000,offset:'rb',area: ['200px', '100px']});
        }
        //下线通知
        if(obj.loginOffInfo != undefined){
            layui.layer.msg(obj.loginOffInfo, {icon: 6,time:5000,offset:'rb',area: ['200px', '100px']});
        }
        //session过期通知
        if(obj.timeOutOfSession != undefined){
            websocket.close();
            layui.layer.alert(obj.timeOutOfSession,{icon: 3, title:'提示'}, function (index) {
                window.location.href = '/hbean/toLogin';//跳转到登陆页
            });
        }
        //在其他地方登录通知
        if(obj.loginAtOtherPlace != undefined){
            websocket.close();
            layui.layer.alert(obj.loginAtOtherPlace,{icon: 3, title:'提示'}, function (index) {
                window.location.href = '/hbean/toLogin';//跳转到登陆页
            });
        }
    };
    websocket.onclose = function(){//连接关闭的回调方法
    };
    window.onbeforeunload = function(){//关闭或者刷新浏览器窗口触发的方法
        websocket.close();
    };
    function sendMessage(){//发送消息
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
<script th:inline="javascript">

    /**
     * 从 sessionStorage 中获取登录人信息
     */
    var userInfo = sessionStorage.getItem("userInfo");

    layui.use(['layer','element','util'], function() {
        // var $ = layui.jquery;
        var util = layui.util;
        var layer = layui.layer;
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        initIframeHeight();//初始化 iframe 高度

        //获取顶部菜单
        $.ajax({
            url:'sysUser/getMenus',
            type: 'post',
            data:{},
            dataType:'json',//服务器返回的数据类型。
            success: function(data) {
                var leftMenus = data.data.leftMenus;
                var topMenus = data.data.topMenus;
                for (var i = 0, l = topMenus.length; i < l; i++) {
                    $('#topMenu').append("<li class=\"layui-nav-item\">" +
                                         "<a href=\"javascript:\" id=\""+topMenus[i].sm02.trim()+"\" onclick=\"showMenu(this);\">"+topMenus[i].sm01+"</a>" +
                                         "</li>");
                }
                for (var i = 0, l = leftMenus.length; i < l; i++) {
                    $('#leftMenu').append("<dd class=\""+leftMenus[i].sm03.trim()+" allMenu\" style=\"display: none\">" +
                                            "<a href=\"javascript:\" data-options=\"{url:'"+ leftMenus[i].sm06 +"',icon:'&#xe613;',title:'"+leftMenus[i].sm01+"',id:'"+leftMenus[i].sm00.trim()+"'}\" onclick=\"openTab(this);\">" +
                                            "<i class=\"layui-icon "+leftMenus[i].sm07+"\"></i>" +
                                            "<span> "+leftMenus[i].sm01+"</span>" +
                                            "</a>" +
                                            "</dd>");
                }
                element.init();
            },
            error:function(response){
            }
        });

        //固定块
        util.fixbar({
            bar1: '&#xe63a',
            bar2: '&#xe62f',
            css: {right: 50, bottom: 50},
            bgcolor: '#C1C1C1',
            click: function(type){
                if(type === 'bar1'){
                    layer.msg('这里将要集成layIM，敬请期待')
                } else if(type === 'bar2') {
                    document.getElementById('layui-body').scrollTop = 0;//回到当前div的顶点
                }
            }
        });

        //修改密码
        $('#modPassword').on('click', function () {
            layer.open({
                type: 2,
                id:'modPasswordLayer',
                title: '修改密码',
                shadeClose: false,
                maxmin: false, //开启最大化最小化按钮
                area: ['450px', '380px'],
                content: 'toModPassword',
                success: function(layero, index){//打开弹出层后回调函数
                },
                end: function () { //关闭弹出层后回调函数
                }
            });
        });

        //修改信息
        $('#modInfo').on('click', function () {
            layer.open({
                type: 2,
                id: 'modInfoLayer',
                title: '编辑',
                shadeClose: false,
                maxmin: false, //开启最大化最小化按钮
                area: ['1100px', '90%'],
                content: 'toModBaseInfo?su00=' + JSON.parse(userInfo).su00,
                success: function(layero, index){
                }
            });
        });

        /**
         * 退出登录
         */
        $('#loginOut').click(function () {
            $.ajax({
                url:'login/loginOff',
                type: 'post',
                data:{},
                dataType:'json',//服务器返回的数据类型。
                success: function(data) {
                    window.location.href = '/hbean/toLogin';//跳转到登陆页
                },
                error:function(response){
                    layer.msg("退出系统异常",{icon:5,time:1000});
                }
            });
        });


        /**
         * 锁屏
         */
        $('#lockPage').click(function(){
            //将锁屏状态 存入 sessionStorage
            window.sessionStorage.setItem("pageLocked",true);
            lockPage();
        });
        function lockPage(){
            //弹出锁屏界面
            layer.open({
                title : false,
                type : 2,//层类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                content :'toLockPage',
                area:['500px','300px'],
                closeBtn : 0,//关闭按钮 不显示
                resize:false,//是否允许拉伸
                shade : 0.9
            });
            $(".lockPage_inPWD").focus();
        }
        /**
         * 保持锁屏状态：sessionStorage会有pageLocked为true的（key,value）；即使刷新页面也不会消失除非关闭页面
         */
        if(sessionStorage.getItem("pageLocked") == "true"){
            lockPage();
        }

         active = {
            /**
             * 新增选项卡
             * @param url
             * @param id
             */
            tabAdd: function (url,title,id) {
                element.tabAdd('tabs', {
                    title : title,
                    content : '<iframe src="'+url+'" data-frameid="'+id+'" width="100%" frameborder="0"></iframe>',
                    id : id
                });

                //选项卡绑定右键
                // $('.layui-tab-title li').on('contextmenu', function () { return false; });
                // $('.layui-tab-title li').on('contextmenu', function (e) {
                //     var x = e.clientX;
                //     var y = e.clientY;
                //     $(".myMenu").css({display: 'block', left: x - 200, top: y - 50});
                //     return false;
                // });

                initIframeHeight();//设置iframe高度
            },
            /**
             * 切换到指定Tab项
             * @param id
             */
            tabChange: function (id) {
                element.tabChange('tabs', id);
            },
            /**
             * 删除指定Tab项
             * @param id
             */
            tabDelete: function (id) {
                element.tabDelete("tabs", id);
            },
            /**
             * 删除所有Tab项
             * @param ids
             */
            tabDeleteAll: function (ids) {
                $.each(ids, function (i,item) {
                    element.tabDelete("tabs", item);
                })
            }
        };

        /**
         * 关闭所有Tab项
         */
        $('.closeAllTabs').click(function () {
            var ids = new Array();
            $.each($(".layui-tab-title li[lay-id]"), function (i) {
                ids[i] = $(this).attr("lay-id");
            });
            active.tabDeleteAll(ids);
        });

        /**
         * 关闭其他Tab项
         */
        $('.closeOtherTabs').click(function () {
            var id = $(".layui-tab-title .layui-this").attr("lay-id");
            var ids = new Array();
            $.each($(".layui-tab-title li[lay-id]"), function (i) {
                if($(this).attr("lay-id") != id){
                    ids[i] = $(this).attr("lay-id");
                }
            });
            active.tabDeleteAll(ids);
        });

        /**
         * 关闭当前tab
         */
        $('.closeThisTab').click(function () {
            var id = $(".layui-tab-title .layui-this").attr("lay-id");
            active.tabDelete(id);
        });

        /**
         * 刷新当前tab
         */
        $('.refreshThisTab').click(function () {
            var id = $(".layui-tab-title .layui-this").attr("lay-id");
            active.tabChange(id);
            $("iframe[data-frameid='"+id+"']").attr("src",$("iframe[data-frameid='"+id+"']").attr("src")); //刷新框架 iframe
        });


        

    });

    /**
     * 显示菜单
     */
    function showMenu(obj){
        $('dd.allMenu').css('display','none');
        $('dd.'+obj.id.trim()).css('display','block');
        layui.element.init();
    }

    var active;
    /**
     * 打开新tab
     * 如果当前菜单已打开则切换到tab
     * 如果没有打开则打开新tab
     */
    function openTab(obj){

        var options=obj.getAttribute("data-options");
        var options1=eval('('+options+')');
        var url = options1.url;
        var title = options1.title;
        var id = options1.id;

        var isExist = false;
        if($(".layui-tab-title li[lay-id]").length<=0){
            active.tabAdd(url,title,id);
            active.tabChange(id);
        }else{
            $.each($(".layui-tab-title li[lay-id]"), function () {
                if ($(this).attr("lay-id") == id) {
                    isExist = true;
                }
            });
            if (isExist == false) {
                active.tabAdd(url,title,id);
                active.tabChange(id);
            }else{
                active.tabChange(id);
            }
        }
    }

    /**
     * 计算iframe的高度，（如果自动高度，会导致iframe挤到一起）
     * @constructor
     */
    function initIframeHeight() {
        var h = $(window).height() -175;
        $("iframe").css("height",h+"px");
    }

    /**
     * 浏览器窗口大小调整事件
     * 当浏览器窗口大小改变时刷新当前tab，重新计算iframe的高度
     */
    $(window).resize(function() {
        var id = $(".layui-tab-title .layui-this").attr("lay-id");
        active.tabChange(id);
        initIframeHeight();
    });

    /**
     * 禁用浏览器后退键
     */
    if (window.history && window.history.pushState) {
        $(window).on('popstate', function () {
            window.history.pushState('forward', null, '');
            window.history.forward(1);
        });
    }
    window.history.pushState('forward', null, '');
    window.history.forward(1);

</script>

</body>
</html>